<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <div class="main">
                <div class="searchDiv1">
                    <div class="search-wrap">
                        <input type="text"
                               v-model="keyword"
                               placeholder="请输入关键字查询">
                        <button @click="getData"></button>
                    </div>
                </div>
                <noData v-if="theModel.length == 0"></noData>
                <div class="showlist-wrap">
                    <div class="showlist"
                         v-for="(item,index) in theModel"
                         :key="index"
                         @click="selectFn(item)">
                        {{item.PersonName}}
                    </div>
                </div>
                <myMenu></myMenu>

            </div>
        </popup>
    </div>
</template>

<script>
import { XHeader, TransferDom, Popup, Icon } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'zgResponsibleProp',
    data () {
        return {
            keyword: '',
            propShow: false,
            theModel: [],
            userInfo: ''
        }
    },
    components: {
        XHeader,
        myMenu,
        Popup,
        Icon
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        if (this.deptId) {
            this.getData()
        }
    },
    props: {
        selectResponsibleUserFn: {
            type: Function
        },
        zgResponsiblePropShow: {
            type: Boolean,
            default: false
        },
        deptId: ''
    },
    watch: {
        zgResponsiblePropShow (newVal) {
            this.propShow = newVal
        },
        deptId (newVal) {
            if (newVal) {
                this.getData()
            }
        }
    },
    methods: {
        propHide () {
            this.$parent.zgResponsiblePropShow = false
        },
        getData () {
            let param = {
                'allowPaging': true,
                'business': 'GetCheckPersonsByFileName',
                'data': {
                    id: this.deptId,
                    filename: this.keyword
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userId

            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        this.theModel = res.data.data
                    }
                }
            )
        },
        selectFn (item) {
            this.selectResponsibleUserFn(item)
        }
    }

}
</script>

<style scoped lang="less">
.main {
    background-color: #fff;
}
.showlist-wrap {
    height: 340px;
    overflow-x: scroll;
}
.showlist {
    height: 40px;
    line-height: 40px;
    color: #999;
    font-size: 14px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
}
.searchDiv1 {
    display: flex;
    align-items: center;
    height: 60px;
    background: #ebeef3;
    padding: 0 20px;
    overflow: hidden;
}
.search-wrap {
    display: flex;
    justify-content: center;
    height: 40px;
    margin: 10px auto;
    border-radius: 8px;
    background: #fff;
    padding: 10px 15px;
    flex: 1;
    input {
        height: 20px;
        flex: 1;
        font-size: 14px;
        color: #666;
    }
    button {
        width: 24px;
        height: 25px;
        background: url(../../../static/images/s_03.png) no-repeat center #fff;
        background-size: 24px 25px;
    }
}
</style>
